<!--
 * @Author: 庄东东
 * @Date: 2021-08-31 20:05:53
 * @LastEditTime: 2021-09-18 17:24:00
 * @LastEditors: 庄东东
 * @Description: 
 * @FilePath: \romance\src\page\userInfo.vue
-->
<script lang="ts" setup>
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { GlobalDataProps } from "../store/index";
import Picker, { t } from "../components/picker.vue";
import age from "../config/age";
const store = useStore<GlobalDataProps>();
const info = computed(() => store.state.userInfo.info);
const getInfoGraduation = computed<string>(
  () => store.getters["getInfoGraduation"]
);
const Sex = computed<string>(() => store.getters["getInfoSex"]);
const Address = computed<string>(() => store.getters["getInfoAddress"]);
let showBigImage = ref(false);
const bigImage = () => {
  showBigImage.value = true;
};
let edit = ref(false);
let submit = () => {
  edit.value = !edit.value;
};
let PickerVal = ref({
  type: "",
  show: false,
  keyVal: "1"
});
let clickPicker = (type: t, key: string) => {
  PickerVal.value = {
    type: type,
    show: true,
    keyVal: key
  };
};
let a = 11;

let setVal = (e: { data: any; type: string; keyVal: string }) => {
  console.log(e);
  PickerVal.value = {
    ...PickerVal.value,
    show: false
  };
  let data = e.data;
  if (data === undefined) return;
  let keyVal = e.keyVal;
  let type = e.keyVal;
  if (type == "area") {
    let [pro, city] = data;
    store.commit("setInfo", {
      province: pro.name,
      provinceCode: pro.code,
      city: city.name,
      cityCode: city.code
    });
    return;
  }
  store.commit("setInfo", {
    [keyVal]: data
  });
};
</script>

<template>
  <div class="userInfo">
    <Picker v-bind="PickerVal" @close="setVal" />
    <van-cell v-if="!edit" value-class="font" title="头像" class="cenll">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-image
          round
          width="24px"
          height="24px"
          :src="info.avatar"
          @click="bigImage"
        />
      </template>
    </van-cell>
    <van-cell
      v-if="!edit"
      value-class="font"
      title="微信号"
      class="cenll"
      :value="info.vx"
    />
    <van-cell
      v-if="!edit"
      value-class="font"
      title="名称"
      class="cenll"
      :value="info.name"
    />
    <van-field
      v-model="info.mobile"
      :readonly="!edit"
      label="手机号"
      input-align="right"
    />
    <van-cell
      value-class="font"
      title="年龄"
      class="cenll"
      :value="info.age"
      @click="clickPicker('age', 'age')"
    />
    <van-cell
      value-class="font"
      title=" 性别"
      class="cenll"
      :value="Sex"
      @click="clickPicker('sex', 'sex')"
    />
    <van-cell
      value-class="font"
      title=" 地址"
      class="cenll"
      :value="Address"
      @click="clickPicker('area', 'area')"
    />
    <van-field
      v-model="info.school"
      :readonly="!edit"
      label="学校名称"
      input-align="right"
      class="cenll"
    />
    <van-cell
      value-class="font"
      title="是否毕业"
      class="cenll"
      :value="getInfoGraduation"
      @click="clickPicker('whether', 'graduation')"
    />
    <van-field
      v-model="info.myself"
      :readonly="!edit"
      rows="3"
      autosize
      label="人生经历"
      type="textarea"
      maxlength="150"
      placeholder="不少于20个字"
      show-word-limit
    />
    <van-field
      v-model="info.she"
      :readonly="!edit"
      rows="3"
      autosize
      label="心中的她"
      type="textarea"
      maxlength="150"
      placeholder="不少于20个字"
      show-word-limit
    />
    <div style="margin: 16px">
      <van-button round block type="info" @click="submit">{{
        !edit ? "编辑" : "保存"
      }}</van-button>
    </div>
    <van-popup v-model:show="showBigImage">
      <van-image width="90vw" :src="info.avatar" @click="bigImage" />
    </van-popup>
  </div>
</template>
<style lang="less" scoped></style>
<style lang="less"></style>
